import { HTMLAttributes, createElement, type FC } from 'react';
import classNames from 'classnames';

import { dividerDefaultProps } from './defaultProps';
import type { DividerOptions } from './type';

export interface DividerProps extends DividerOptions, HTMLAttributes<HTMLDivElement> {}

const Divider: FC<DividerProps> = (props) => {
  const { className, orientation, inverted, hidden, gap, clearing, children, forwardedRef, ...dividerProps } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames('ui', orientation, gap, { inverted, hidden, clearing }, 'divider', className),
      ...dividerProps,
    },
    children,
  );
};

Divider.displayName = 'Divider';
Divider.defaultProps = dividerDefaultProps;

export default Divider;
